<template>
<base-content>
    <div class="main">
     
     <q-breadcrumbs class="text-grey" active-color="purple">
      <template v-slot:separator>
        <q-icon
          size="1.2em"
          name="arrow_forward"
          color="purple"
        />
      </template>

      <q-breadcrumbs-el label="首页" icon="home"  to="/"/>
      <q-breadcrumbs-el label="放射科" icon="widgets" />
      <q-breadcrumbs-el label="pdf详情" icon="navigation" />
    </q-breadcrumbs>


    <div class="top">
        <div class="title">XX报告</div>
        <div>
            <q-btn label="返回" />
        </div>
    </div>



<div class="pdfItem"  v-if="false">
		<input type="checkbox" v-model="show">
		<select v-model="src" style="width: 30em">
			<option v-for="item in pdfList" :key="item" :value="item" v-text="item"></option>
		</select>
		<input v-model.number="page" type="number" style="width: 5em"> /{{numPages}}
		<button @click="rotate += 90">&#x27F3;</button>
		<button @click="rotate -= 90">&#x27F2;</button>
    <button @click="bigs">放大</button>
    <button @click="small">缩小</button>
		<button @click="$refs.pdf.print()">print</button>


		<div style="width: 100%;height:100%;left:0%;top:0%" ref="pdfitem" class="item-item"
    v-on:mouseover="changeActive($event)"
     v-on:mouseout="removeActive($event)"
     @mousemove="pdfMove($event)">
			<div v-if="loadedRatio > 0 && loadedRatio < 1" style="background-color: green; color: white; text-align: center" :style="{ width: loadedRatio * 100 + '%' }">{{ Math.floor(loadedRatio * 100) }}%</div>
			<pdf v-if="show" ref="pdf" style="border: 1px solid red" :src="src" :page="page" :rotate="rotate" @password="password" @progress="loadedRatio = $event" @error="error" @num-pages="numPages = $event" @link-clicked="page = $event" ></pdf>
		</div>


	</div>




    <div  class="pdf">
            <!-- 引入组件. :lock-aspect-ratio="true"：锁定纵横比例 :resizable="false": 不可缩放-->
            <vue-draggable-resizable
                w="auto"
                h="auto"
                :grid="[20,40]"
                :x="10"
                :y="10"
                :resizable="false"
                :lock-aspect-ratio="true"
                style="height: 100%; width: 100%;  position: absolute; z-index:100;"
                class="item-item"
            >



<div class="pdfItem"  ref="pdfItem">
		<!-- <input type="checkbox" v-model="show">
		<select v-model="src" style="width: 30em">
			<option v-for="item in pdfList" :key="item" :value="item" v-text="item"></option>
		</select>
		<input v-model.number="page" type="number" style="width: 5em"> /{{numPages}}
		<button @click="rotate += 90">&#x27F3;</button>
		<button @click="rotate -= 90">&#x27F2;</button>
    <button @click="bigs">放大</button>
    <button @click="small">缩小</button>
		<button @click="$refs.pdf.print()">print</button> -->

<!-- ref="pdfitem" -->

		<div style="width: 100%;height:100%;"  class="item-item"
   
     ref="table" @wheel.prevent="handleTableWheel($event)">
			<!-- <div v-if="loadedRatio > 0 && loadedRatio < 1" style="background-color: green; color: white; text-align: center" :style="{ width: loadedRatio * 100 + '%' }">{{ Math.floor(loadedRatio * 100) }}%</div> -->
			<pdf v-if="show" ref="pdf" style="width:100%;height:100%" :src="src" :page="page" :rotate="rotate" @password="password" @progress="loadedRatio = $event" @error="error" @num-pages="numPages = $event" @link-clicked="page = $event" ></pdf>
		</div>

	</div>


            </vue-draggable-resizable>

<div class="back" v-if="page >1" @click="nextPage(-1)">
</div>
<div class="next" @click="nextPage(1)" v-if="page < numPages">
</div>


    </div>



    </div>

    </base-content>
</template>

<script>

import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
import BaseContent from '../../components/BaseContent/BaseContent'

import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
import { getList } from '../../axios/AxiosConfig.js'
import { clearInterval } from 'timers'
export default {
  name: 'pdfItem',

    data(){
        return {
            flag:true,
        data:'',
          showshow:true,    
    show:true,
			pdfList: [
				'',
				'https://cdn.mozilla.net/pdfjs/tracemonkey.pdf',
				'https://cdn.rawgit.com/mozilla/pdf.js/c6e8ca86/test/pdfs/freeculture.pdf',
				'https://cdn.rawgit.com/mozilla/pdf.js/c6e8ca86/test/pdfs/annotation-link-text-popup.pdf',
				'https://cdn.rawgit.com/mozilla/pdf.js/c6e8ca86/test/pdfs/calrgb.pdf',
				'https://cdn.rawgit.com/sayanee/angularjs-pdf/68066e85/example/pdf/relativity.protected.pdf',
				'data:application/pdf;base64,JVBERi0xLjUKJbXtrvsKMyAwIG9iago8PCAvTGVuZ3RoIDQgMCBSCiAgIC9GaWx0ZXIgL0ZsYXRlRGVjb2RlCj4+CnN0cmVhbQp4nE2NuwoCQQxF+/mK+wMbk5lkHl+wIFislmIhPhYEi10Lf9/MVgZCAufmZAkMppJ6+ZLUuFWsM3ZXxvzpFNaMYjEriqpCtbZSBOsDzw0zjqPHZYtTrEmz4eto7/0K54t7GfegOGCBbBdDH3+y2zsMsVERc9SoRkXORqKGJupS6/9OmMIUfgypJL4KZW5kc3RyZWFtCmVuZG9iago0IDAgb2JqCiAgIDEzOAplbmRvYmoKMiAwIG9iago8PAogICAvRXh0R1N0YXRlIDw8CiAgICAgIC9hMCA8PCAvQ0EgMC42MTE5ODcgL2NhIDAuNjExOTg3ID4+CiAgICAgIC9hMSA8PCAvQ0EgMSAvY2EgMSA+PgogICA+Pgo+PgplbmRvYmoKNSAwIG9iago8PCAvVHlwZSAvUGFnZQogICAvUGFyZW50IDEgMCBSCiAgIC9NZWRpYUJveCBbIDAgMCA1OTUuMjc1NTc0IDg0MS44ODk3NzEgXQogICAvQ29udGVudHMgMyAwIFIKICAgL0dyb3VwIDw8CiAgICAgIC9UeXBlIC9Hcm91cAogICAgICAvUyAvVHJhbnNwYXJlbmN5CiAgICAgIC9DUyAvRGV2aWNlUkdCCiAgID4+CiAgIC9SZXNvdXJjZXMgMiAwIFIKPj4KZW5kb2JqCjEgMCBvYmoKPDwgL1R5cGUgL1BhZ2VzCiAgIC9LaWRzIFsgNSAwIFIgXQogICAvQ291bnQgMQo+PgplbmRvYmoKNiAwIG9iago8PCAvQ3JlYXRvciAoY2Fpcm8gMS4xMS4yIChodHRwOi8vY2Fpcm9ncmFwaGljcy5vcmcpKQogICAvUHJvZHVjZXIgKGNhaXJvIDEuMTEuMiAoaHR0cDovL2NhaXJvZ3JhcGhpY3Mub3JnKSkKPj4KZW5kb2JqCjcgMCBvYmoKPDwgL1R5cGUgL0NhdGFsb2cKICAgL1BhZ2VzIDEgMCBSCj4+CmVuZG9iagp4cmVmCjAgOAowMDAwMDAwMDAwIDY1NTM1IGYgCjAwMDAwMDA1ODAgMDAwMDAgbiAKMDAwMDAwMDI1MiAwMDAwMCBuIAowMDAwMDAwMDE1IDAwMDAwIG4gCjAwMDAwMDAyMzAgMDAwMDAgbiAKMDAwMDAwMDM2NiAwMDAwMCBuIAowMDAwMDAwNjQ1IDAwMDAwIG4gCjAwMDAwMDA3NzIgMDAwMDAgbiAKdHJhaWxlcgo8PCAvU2l6ZSA4CiAgIC9Sb290IDcgMCBSCiAgIC9JbmZvIDYgMCBSCj4+CnN0YXJ0eHJlZgo4MjQKJSVFT0YK',
			],
			src:'',
			loadedRatio: 0,
			page: 1,
			numPages: 0,
			rotate: 0,
            selected:[],

        }
    },
    // props:['data'],
    components:{BaseContent,pdf,VueDraggableResizable},
    methods:{

           handleTableWheel(event) {
            let obj = this.$refs.pdfItem;
            if(this.flag){
                    this.flag = false
                    setTimeout(()=>{
                        this.tableZoom(obj, event);
                    },700)
                }
            
        },
        tableZoom(obj, event) {
            console.log('调用子函数');
            // 一开始默认是100%
            // let zoom = parseInt(obj.style.zoom, 10) || 100;
            let num = obj.style.width.replace('%','')
            // let zoom = parseInt(num, 10) || 100;
            let zoom = parseInt(num, 10) || 40
            //基础是40%
            // 滚轮滚一下wheelDelta的值增加或减少120
            // zoom += event.wheelDelta / 24;
            zoom += event.wheelDelta / 36;

            if(zoom < 20 || zoom > 110) return
            console.log('zoom',zoom,obj.style.scale);

            if(zoom > 0 ) {
                this.$nextTick(()=>{          
                    obj.style.width = zoom + '%'
                    this.flag  =true
                })
            }
        return false
        },
 




      btn(e){
        console.log('点击了',e);
      },
      pdfShow(){
        console.log(11,this.data);
        this.src = pdf.createLoadingTask({ url: this.data[0].pdf, CMapReaderFactory });
        
           this.src.promise.then(pdf => {
	      this.numPages = pdf.numPages;
	    })

        
	
      },


password: function(updatePassword, reason) {

			updatePassword(prompt('password is "test"'));
		},
		error: function(err) {

			console.log(err);
		},

 
// 下一页
nextPage(num){
    this.page += num

},


//关闭弹框
popShow(){
    this.$emit('close')
}


    },
    mounted(){    

    },
    created() {
       


         getList().then(res=>{
       console.log('res',res);
       this.data = res.data
       
            this.$nextTick(()=>this.pdfShow())



     }).catch(err=>{
       console.log(err);
     })

    },
}
</script>

<style scoped lang="less">
.main{
  width: 100%;
.top{
    margin-top: 1rem;
    display: flex;
    height: 2rem;
    justify-content: space-between;
    padding: 0 2rem;
    .title{
        line-height: 2rem;
        font-size: 1rem;
        font-weight: bold;
    }
}
  
.pdf{
    height: 40rem; 
    width: 70%; 
    border: 1px solid #000; 
    position: relative; 
    overflow: hidden;
    z-index:10;
    background-color:#000;
    margin-top: 2rem;
    .item-item{
        .pdfItem{
  z-index: 120;

background-color: #000;

//   width: 30%;
width: 40%;
// width: 100%;
min-width: 30%;
  height: 100%;
  position: absolute;
left:50%;
transform: translateX(-50%);
  
  
    .item-item{
    cursor: pointer;

  }
  
}

    

    }

.next{
  position: absolute;
  top: 50%;
  right: 5rem;
  width: 3rem;
  height: 3rem;
  z-index: 300;
  cursor: pointer;
  background: url('../../../public/lanshi/next.png') no-repeat;
  background-size: 100% 100% ;
}

.back{
  position: absolute;
  top: 50%;
  left: 5rem;
  width: 3rem;
  height: 3rem;
  z-index: 300;
  cursor: pointer;
  background: url('../../../public/lanshi/back.png') no-repeat;
  background-size: 100% 100% ;
}
    

}



}



</style>